import { View } from '@tarojs/components'
import React, { useState, useEffect } from 'react'
import { EChart } from '../echarts-taro3-react'

/**柱形图表  */
export const BarChart: React.FC<{
  data?: Device.ParamDataRatio[]
}> = ({ data }): JSX.Element => {
  const [echart, setEchart] = useState<any>(null)
  const refChart = (chart: any) => {
    console.log('%cBarChart refChart chart变化了', 'color:green');
    setEchart(chart)
  }

  useEffect(() => {
    console.log('%cBarChart useEffect 图表数据发生变化', 'color:green');
    if (!data) {
      console.log('%cBarChart useEffect 无数据传入', 'color:green')
      return
    }

    if (!echart) {
      // timer && clearInterval(timer)
      console.log('%cBarChart useEffect 无echart', 'color:green')
      return
    }

    draw(data)

  }, [data, echart])


  function draw(data: Device.ParamDataRatio[]) {
    console.log('%cBarChart draw 开始处理图表数据，并渲染图表', 'color:green')
    console.log(echart);

    let xAxisData = data.map(item => item.paramName)
    let barData = data.map(item => item.normalRatio)
    let barData1 = data.map(item => -item.exceptionRatio)
    let itemStyleColor = (color1: string, color2: string) => {
      return {
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: color1 // 0% 处的颜色
          },
          {
            offset: 1,
            color: color2 // 100% 处的颜色
          }
        ]
      }
    }

    const defautOption = {
      grid: {
        left: '1%',
        right: '1%',
        bottom: '1%',
        top: '8%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: xAxisData,
        axisTick: {
          show: false
        },
        axisLabel: {
          margin: 18,
          fontSize: 12,
          color: '#595959',
          fontWeight: 'bold',
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      series: [
        {
          type: 'bar',
          stack: 'Total',
          barWidth: 20,
          itemStyle: {
            color: itemStyleColor('#1DC79C', '#D8F3FF')
          },
          label: {
            show: true,
            position: 'top',
            color: '#595959',
            fontSize: 10,
            borderRadius: [4, 4, 0, 0],
            formatter: ({ value }: any) => {
              return value || ''
            }
          },
          data: barData
        },
        {
          type: 'bar',
          stack: 'Total',
          barWidth: 20,
          itemStyle: {
            color: itemStyleColor('#D4F1FD', '#E580F5')
          },
          label: {
            show: true,
            position: 'bottom',
            color: '#F86A6B',
            fontSize: 10,
            borderRadius: [0, 0, 4, 4],
            formatter: ({ value }: any) => {
              return value || ''
            }
          },
          data: barData1
        }
      ]
    }
    echart && echart.refresh(defautOption)
  }

  return <EChart ref={refChart} canvasId="paramAbnormalAnalyse"></EChart>
}

export const EchartLegend: React.FC<{
  backgroundColor?: string
}> = ({ backgroundColor = '#000', children }): JSX.Element => {
  return (
    <View className="h-15 flex items-center mr-15">
      <View
        className="w-10 h-6 mr-6 rounded-1"
        style={{
          backgroundColor: backgroundColor
        }}
      ></View>
      <View className="hanzi text-11">{children}</View>
    </View>
  )
}
